<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Socket.io Twitter Example</title>
  </head>
  <body>
    <h1>Socket.io Twitter Example</h1>
    <ul class="percentage">
      <li class="love">0</li>
      <li class="hate">0</li>
    </ul>
    <ul class="tweets"></ul>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script src="/socket.io/socket.io.js"></script>
    <script>
      var socket = io.connect();
      jQuery(function ($) { 
        var tweetList = $('ul.tweets'),
            loveCounter = $('li.love'),
            hateCounter = $('li.hate');
        socket.on('tweet', function (data) {
          tweetList
            .prepend('<li>' + data.user + ': ' + data.text + '</li>');
          loveCounter
            .text(data.love + '%');
          hateCounter
            .text(data.hate + '%');
        });
      });
    </script>
  </body>
</html>
